import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import CustomPopover from './CustomPopover';
import './custom-popover.scss';
import { copyTextToClipboard, toastShort } from '../../utils';
import { Button, Divider, Modal, Input, Drawer, message, Popconfirm } from 'antd';
import { NodeIndexOutlined, RightOutlined, DeleteOutlined, DiffOutlined, MacCommandOutlined, MonitorOutlined, PaperClipOutlined, InfoCircleOutlined, UserOutlined } from '@ant-design/icons';
import { yellow } from '@ant-design/colors';
import { warning } from '@remix-run/router';
import BranchVersionPopconfirm from './BranchVersionPopconfirm';
import useReSize from "./../../hooks/useResize";
import FastFunctionDrawer from '../drawer/FastFunctionDrawer';

interface Props {
    clientX: number
    clientY: number
}

const BranchSettingPopover = (props: Props, ref: any) => {
    useImperativeHandle(ref, () => ({
        openPopover
    }))

    const {
        clientX,
        clientY
    } = props;

    const customSelectRef = useRef<any>(null);

    const openPopover = () => {
        customSelectRef.current.show();
    };

    // const onClickInsertToolsItem = (type: string) => {
    //     toastShort('warning', '表格界面不支持此操作');
    //     customSelectRef.current.handleClosePopover();
    // }

    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
        customSelectRef.current._handleClose();
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const [newModalOpen, setNewModalOpen] = useState(false);

    const showNewModal = () => {
        setNewModalOpen(true);
        customSelectRef.current._handleClose();
    };

    const handleOk1 = () => {
        setNewModalOpen(false);
    };

    const handleCancel1 = () => {
        setNewModalOpen(false);
    };

    const [open, setOpen] = useState(false);

    const showDrawer = () => {
        setOpen(true);
        customSelectRef.current._handleClose();
    };

    const onClose = () => {
        setOpen(false);
    };

    return (
        <CustomPopover
            ref={customSelectRef}
            clientX={clientX}
            clientY={clientY}
            contentRender={(props) => (
                <div className='brabch-box'>
                    <Popconfirm
                        placement="leftTop"
                        title={false}
                        description={
                            <BranchVersionPopconfirm />
                        }
                        icon={false}
                        okText={false}
                        okType={null}
                        showCancel={false}
                    >
                        <div className='brabch-content-item flex-row'>
                            <div className='flex-row'>
                                <NodeIndexOutlined />
                                <div className='brabch-content-text'>查看分支版本</div>
                            </div>
                            <RightOutlined />
                        </div>
                    </Popconfirm>
                    <div className='brabch-content-line'></div>
                    <div className='brabch-content-list flex-row'>
                        <DiffOutlined />
                        <div className='brabch-content-text'>收藏为我的规划模板</div>
                    </div>
                    <div className='brabch-content-list flex-row' onClick={showDrawer}>
                        <MacCommandOutlined />
                        <div className='brabch-content-text'>功能快捷键</div>
                    </div>
                    <Drawer placement="right" closable={false} onClose={onClose} open={open}>
                        <FastFunctionDrawer />
                    </Drawer>
                    <div className='brabch-content-list flex-row'>
                        <MonitorOutlined />
                        <div className='brabch-content-text'>新手导航</div>
                    </div>
                    <div className='brabch-content-list flex-row' onClick={showNewModal}>
                        <PaperClipOutlined />
                        <div className='brabch-content-text'>另存为新版本</div>
                    </div>
                    <div className='brabch-content-line'></div>
                    <Modal
                        width={420}
                        title={'另存为新版本'}
                        open={newModalOpen}
                        onOk={handleOk1}
                        onCancel={handleCancel1}
                        closable={false}
                        centered={true}
                    >
                        <div className='modal-input-name'>版本名称</div>
                        <Input placeholder="请输入版本名称" />
                        <div className='modal-input-name'>可用范围</div>
                        <div className='modal-content-box'>
                            <div className='modal-content-left-box'>
                                <div className='modal-content-left'>
                                    <UserOutlined style={{ fontSize: 20, marginRight: 12 }} />
                                    仅自己使用
                                </div>
                                <div className='modal-content-use-text'>可在其他所有项目中使用</div>
                            </div>
                            <span className='iconfont-1 ghzs-gray-xiangxia2 modal-normal-font'></span>
                        </div>
                    </Modal>
                    <div className='brabch-content-list flex-row' onClick={showModal}>
                        <DeleteOutlined style={{ color: 'red' }} />
                        <div className='brabch-content-text' style={{ color: 'red' }}>删除</div>
                    </div>
                    <Modal
                        width={300}
                        open={isModalOpen}
                        onOk={handleOk}
                        onCancel={handleCancel}
                        closable={false}
                        centered={true}
                    >
                        <div className='modal-handle-cancel'><InfoCircleOutlined style={{ fontSize: 20, marginRight: 8, color: '#faad14' }} />确认删除文档？</div>
                    </Modal>
                </div >
            )}
        />
    )
}


export default forwardRef(BranchSettingPopover);